/**
 * 高亮脚本
 */

import * as React from 'react';
import * as classnames from 'classnames';
import './HighlightSentence.scss';

interface SentenceProps {
  sentence: string[];
  playingTimeAt: number;
}
const defaultProps: SentenceProps = {
  sentence: [],
  playingTimeAt: -1,
};

const HighlightSentence: React.SFC<SentenceProps> = ({ sentence, playingTimeAt }) => {
  return (
    <div className="sentence-wrap">
      {sentence.map((word: any, index: number) => {
        const wordArr = word.name.split(/\s+/);
        const startArr = word.start ? String(word.start).split(',') : [];
        const endArr = word.end ? String(word.end).split(',') : [];

        return wordArr.map((text: any, innerIndex: number) => {
          const begin = startArr.length > 0 ? Number(startArr[innerIndex]) : 0;
          const end = endArr.length > 0 ? Number(endArr[innerIndex]) : 0;
          return (
            <span
              key={`${index}-${innerIndex}`}
              className={classnames(
                begin &&
                  end &&
                  playingTimeAt &&
                  playingTimeAt >= begin &&
                  playingTimeAt <= end &&
                  'highlight'
              )}>
              {text}
              &nbsp;
            </span>
          );
        });
      })}
    </div>
  );
};

HighlightSentence.defaultProps = defaultProps;
export default HighlightSentence;
